<template>
    <h1>
        管理员页面
        <el-button @click="dialog = true">添加管理员</el-button>
    </h1>
    <!-- 管理员列表 -->
    <el-table :data="adminListCom" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column prop="adminname" label="名字" width="180" />
        <!-- <el-table-column prop="role" label="角色" width="180" /> -->
        <el-table-column prop="role" label="角色" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.role === 1">超管</el-tag>
                <el-tag v-else type="success">管理员</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="editAdmin(scope.row)"
                    >编辑</el-button
                >
                <el-button
                    size="small"
                    type="danger"
                    @click="delAdmin(scope.row.adminid)"
                    >删除</el-button
                >
            </template>
        </el-table-column>
    </el-table>

    <!-- 管理员列表的分页 -->
    <el-pagination
        v-model:current-page="current"
        :page-size="15"
        layout="prev, pager, next"
        :total="adminList.length"
        hide-on-single-page
    />

    <!-- 添加管理员的抽屉组件 -->
    <el-drawer
        v-model="dialog"
        :title="addOrEdit ? '添加管理员' : '编辑管理员'"
        direction="rtl"
        class="demo-drawer"
        @close="close"
    >
        <div class="demo-drawer__content">
            <el-form :model="form">
                <el-form-item
                    v-if="addOrEdit"
                    label="用户名"
                    label-width="80px"
                >
                    <el-input v-model="form.adminname" />
                </el-form-item>
                <el-form-item v-if="addOrEdit" label="密码" label-width="80px">
                    <el-input v-model="form.password" />
                </el-form-item>
                <el-form-item label="角色身份" label-width="80px">
                    <el-select v-model="form.role" placeholder="请选择角色身份">
                        <el-option label="超管" :value="1" />
                        <el-option label="管理员" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="角色权限">
                    <el-tree
                        ref="treeRef"
                        :data="routesList"
                        show-checkbox
                        node-key="label"
                        :default-checked-keys="defaultCheckedKeys"
                    />
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button @click="close">取消</el-button>
                <el-button v-if="addOrEdit" type="primary" @click="addUser"
                    >确定添加</el-button
                >
                <el-button v-else type="primary" @click="editUser"
                    >确定编辑</el-button
                >
            </div>
        </div>
    </el-drawer>

    <!-- 删除的确认弹框 -->
    <el-dialog v-model="dialogVisible" title="删除确认弹框" width="30%">
        <h1>您确定删除吗?</h1>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="del"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { getAdminList, addAdmin, adminUpdate, adminDelete } from "@/api/user";
import { ElMessage } from "element-plus";
import { routes } from "@/router";

export default {
    data() {
        return {
            adminList: [],
            current: 1,
            dialog: false,
            form: {
                adminname: "",
                password: "",
                role: "",
                checkedKeys: [],
            },
            routesList: routes[0].children,
            /**
             *  当前变量决定抽屉组件内展示的时 添加还是编辑相关的内容
             *      默认为 true, 展示添加相关的内容
             *      如果为 false, 展示编辑相关的内容
             */
            addOrEdit: true,
            defaultCheckedKeys: [],
            dialogVisible: false,
            delId: -1,
        };
    },
    methods: {
        // 6. 点击删除确认弹框的确定按钮
        async del() {
            // console.log("删除一个用户");
            const res = await adminDelete({
                adminid: this.delId,
            });

            this.dialogVisible = false;

            if (res.code !== "200") {
                return ElMessage({
                    type: "warning",
                    message: res.message,
                });
            }

            ElMessage({
                type: "success",
                message: res.message,
            });

            // 请求最新的数据
            this.adminList = (await getAdminList()).data;
        },

        // 5. 点击删除按钮
        delAdmin(id) {
            // 存储要背删除的 ID
            this.delId = id;

            // 打开删除确认弹框
            this.dialogVisible = true;
        },

        // 4. 确定编辑按钮, 内部收集数据, 发送请求
        async editUser() {
            this.getCheckedKeys();

            const res = await adminUpdate(this.form);

            if (res.code !== "200") {
                return ElMessage({
                    type: "warning",
                    message: res.message,
                });
            }

            ElMessage({
                type: "success",
                message: res.message,
            });

            // 请求最新的数据
            this.adminList = (await getAdminList()).data;

            // 关闭抽屉组件
            this.close();

            console.log(res);
        },

        // 3. 点击编辑按钮
        editAdmin(data) {
            // 控制抽屉组件内展示 编辑相关的内容
            this.addOrEdit = false;
            // 打开抽屉组件
            this.dialog = true;

            this.form.adminname = data.adminname;
            this.form.role = data.role;

            const res = [];
            data.checkedKeys.forEach((item) => {
                item.children.forEach((child) => {
                    res.push(child.label);
                });
            });
            this.defaultCheckedKeys = res;
        },

        // 2. 抽屉组件的取消按钮
        close() {
            // 2.1 关闭抽屉组件
            this.dialog = false;

            // 2.2 清空输入框
            this.form = {
                adminname: "",
                password: "",
                role: "",
                checkedKeys: [],
            };

            // 2.3 清空角色权限的选中
            this.$refs.treeRef.setCheckedNodes([]);

            // 2.4 还原 添加管理员的变量
            this.addOrEdit = true;
        },

        // 1.5 获取角色权限
        getCheckedKeys() {
            // console.log(this.$refs.treeRef.getCheckedNodes())
            // console.log(this.$refs.treeRef.getCheckedNodes(true))

            // 1.5.1 存储我们获取到的节点, 但是不符合我们的需求, 所以我们需要 进行一个改造
            const list = this.$refs.treeRef.getCheckedNodes(true);
            // console.log(list)

            // 1.5.2 新建一个数组, 用于存储最终的结果
            const result = [];

            // 1.5.3 新建一个数组, 用于存储选中节点的父级 label 属性, 后续可以利用 这个属性判断我们之前是否选中过这个节点或者之前有没有遇到过这个父级
            const parentLabel = [];

            // 1.5.4 遍历 list 数组, 获取到每一个子节点, 然后寻找这个子节点对应的父级
            list.forEach((item) => {
                // item 就是我们选中的每一个子节点

                // 1.5.4.1 帮助我们的子节点寻找到对应的父节点
                const parent = this.routesList.find((parent) => {
                    return parent.children.some((child) => {
                        return child.label === item.label;
                    });
                });

                if (!parentLabel.includes(parent.label)) {
                    // 第一次遇到这个数据
                    parentLabel.push(parent.label);

                    result.push({
                        label: parent.label,
                        name: parent.name,
                        children: [item],
                    });
                } else {
                    // 之前遇到过这个数据
                    const parentInfo = result.find(
                        (t) => t.label === parent.label
                    );
                    parentInfo.children.push(item);
                }
            });

            // 1.5.5 将我们处理好的数据, 赋值给 我们 form 对象
            this.form.checkedKeys = result;
        },

        // 1. 抽屉组件 添加管理员的确定按钮
        async addUser() {
            this.getCheckedKeys();

            const res = await addAdmin(this.form);
            if (res.code !== "200") {
                return ElMessage({
                    type: "warning",
                    message: res.message,
                });
            }
            ElMessage({
                type: "success",
                message: res.message,
            });
            // 请求新数据
            this.adminList = (await getAdminList()).data;
            // 弹框关闭
            this.close();
        },
    },
    async mounted() {
        const res = await getAdminList();
        this.adminList = res.data;

        // console.log(routes)
        // console.log(routes[0])
        // console.log(routes[0].children);
    },
    computed: {
        adminListCom() {
            return this.adminList.slice(
                (this.current - 1) * 15,
                this.current * 15
            );
        },
    },
};
</script>
